{% extends 'layout.html.twig' %}

{% block title %}{{ parent() }} - Servicios{% endblock %}

{% block container %}
    <!-- Page Heading/Breadcrumbs -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Servicios
                <small>Subtitulo</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="empresa.html">Inicio</a>
                </li>
                <li class="active">Servicios</li>
            </ol>
        </div>
    </div>
    <!-- /.row -->

    <!-- Image Header -->
    <div class="row">
        <div class="col-lg-12">
            <img class="img-responsive" src="http://placehold.it/1200x300" alt="">
        </div>
    </div>
    <!-- /.row -->

    <!-- Service Panels -->
    <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">Paneles de Servicios</h2>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="panel panel-default text-center">
                <div class="panel-heading">
                        <span class="fa-stack fa-5x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-wheelchair fa-stack-1x fa-inverse"></i>
                        </span>
                </div>
                <div class="panel-body">
                    <h4>Servicio Uno</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    <a href="#" class="btn btn-primary">Más Información</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="panel panel-default text-center">
                <div class="panel-heading">
                        <span class="fa-stack fa-5x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-hospital-o fa-stack-1x fa-inverse"></i>
                        </span>
                </div>
                <div class="panel-body">
                    <h4>Servicio Dos</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    <a href="#" class="btn btn-primary">Más Información</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="panel panel-default text-center">
                <div class="panel-heading">
                        <span class="fa-stack fa-5x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-stethoscope fa-stack-1x fa-inverse"></i>
                        </span>
                </div>
                <div class="panel-body">
                    <h4>Servicio Tres</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    <a href="#" class="btn btn-primary">Más Información</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="panel panel-default text-center">
                <div class="panel-heading">
                        <span class="fa-stack fa-5x">
                              <i class="fa fa-circle fa-stack-2x text-primary"></i>
                              <i class="fa fa-user-md fa-stack-1x fa-inverse"></i>
                        </span>
                </div>
                <div class="panel-body">
                    <h4>Servicio Cuatro</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    <a href="#" class="btn btn-primary">Más Información</a>
                </div>
            </div>
        </div>
    </div>
    <hr>
    {% include 'socialMedia.html.twig' %}
{% endblock container %}
